<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="ui,gui,prototyping,designer,builder,rad,ria,spa,no-code,codeless,without coding,programming,development,drag and drop,web application,build app,create app,make app" />
    <meta name="description" content="Powered by CrossUI No-Code App Builder - Create Interactive App Without Coding" />
    <meta name="copyright" content="copyright@crossui.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Powered by CrossUI No-Code App Builder - Examples - Ajax Basic IO</title>
</head>
    <body>
        <div id="loading" style="position:fixed;width:100%;text-align:center;"><img src="../../../../runtime/loading.gif" alt="Loading..." /></div>
        <div style='height:20px;'></div>
        <div id='layout' style="margin:0 auto;width:680px;border:solid 1px;padding:4px;">
            <table border="1" align=center width="500" id="table1" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
                <caption><b>how to use xui.absIO to interact with service</b></caption>
            	<tbody>
            		<tr>
            			<td width="14%" rowspan="2" bgcolor="#FFFF00"></td>
            			<td rowspan="2" width="7%" align="center" bgcolor="#FFFF00"><b>get</b></td>
            			<td width="9%" rowspan="2" align="center" bgcolor="#FFFF00"><b>post</b></td>
            			<td width="16%" rowspan="2" align="center" bgcolor="#FFFF00"><b>post 
            			file</b></td>
            			<td colspan="2" align="center" bgcolor="#FFFF00"><b>cross domain</b></td>
            		</tr>
            		<tr>
            			<td width="202" align="center" bgcolor="#FFFF00"><b>get</b></td>
            			<td width="8%" align="center" bgcolor="#FFFF00"><b>post</b></td>
            		</tr>
            		<tr>
            			<td width="14%" bgcolor="#FFFF00"><b>xui.Ajax</b></td>
            			<td width="7%" align="center">yes</td>
            			<td width="9%" align="center">yes</td>
            			<td width="16%" align="center" bgcolor="#808080">no</td>
            			<td width="202" align="center" bgcolor="#808080">no</td>
            			<td width="8%" align="center" bgcolor="#808080">no</td>
            		</tr>
            		<tr>
            			<td width="14%" bgcolor="#FFFF00"><b>xui.JSONP</b></td>
            			<td width="7%" align="center">yes</td>
            			<td width="9%" align="center" bgcolor="#808080">no</td>
            			<td width="16%" align="center" bgcolor="#808080">no</td>
            			<td width="202" align="center">yes (best for &quot;return big data&quot;)</td>
            			<td width="8%" align="center" bgcolor="#808080">no</td>
            		</tr>
            		<tr>
            			<td width="14%" bgcolor="#FFFF00"><b>xui.XDMI</b></td>
            			<td width="7%" align="center">yes</td>
            			<td width="9%" align="center">yes</td>
            			<td width="16%" align="center">yes</td>
            			<td width="202" align="center">yes</td>
            			<td width="8%" align="center">yes</td>
            		</tr>
            	</tbody>
            </table>
            <br /><br />
            <div>
                <p>Request data:</p>
                <textarea id='request' style='width:100%;height:80px;'>{
    key:'test',
    paras:{
        p1:'client_set'
    }
}</textarea><br /><br />
                <div> <button id='ajax_get'>use xui.Ajax 'get'</button> <button id='ajax_post'>use xui.Ajax 'post'</button></div><br />
                <div> <button id='JSONP'>use xui.JSONP</button></div><br />
                <div> <button id='iajax_get'>use xui.XDMI 'get'</button> <button id='iajax_post'>use xui.XDMI 'post'</button></div><br />
                <div> <button id='xui_request'>use xui.request function</button></div><br />
                <p>Response data:</p>
                <textarea id='response' style='width:100%;height:50px;' readonly=readonly>
                </textarea>
             </div>
        </div>
        
        <script type="text/javascript" src="../../../../runtime/xui/js/xui-debug.js"></script>
        <script type="text/javascript">
            xui.main(function(){
                xui('loading').remove();

                var getRequest=function(){
                    return xui.unserialize(xui.Dom.byId('request').value);
                },
                setResponse=function(value){
                    xui('response').attr('value', xui.serialize(value.data[0]));
                },
                showErr=function(uri,qs,msg){
                    alert('request raise err in "'+uri+'"' + (qs?' with "'+qs+'"':'') + (msg?': "' + msg +'"':''));            
                },
                onOK=function(response){
                    if(response)setResponse(response);
                    else showErr(this.uri, this.queryString, response);
                },
                onFail=function(msg){
                    showErr(this.uri, this.queryString, msg);
                };

var xuiService='request.php';
                //use xui.Ajax get method
                xui('ajax_get').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        xui.Thread.observableRun(function(threadid){
                            xui.Ajax(xuiService,hash, onOK, onFail,threadid).start();
                        });
                });
                //use xui.Ajax post
                xui('ajax_post').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        xui.Thread.observableRun(function(threadid){
                            xui.Ajax(xuiService,hash, onOK, onFail,threadid,{method:'POST'},{reqType:'xml'}).start();
                        });
                });
                //use xui.JSONP
                xui('JSONP').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        xui.Thread.observableRun(function(threadid){
                            xui.JSONP(xuiService,hash, onOK, onFail,threadid).start();
                        });
                });
                //use xui.XDMI get
                xui('iajax_get').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        xui.Thread.observableRun(function(threadid){
                            xui.XDMI(xuiService,hash, onOK, onFail,threadid,{method:'GET'}).start();
                        });
                });
                //use xui.XDMI post
                xui('iajax_post').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        xui.Thread.observableRun(function(threadid){
                            xui.XDMI(xuiService,hash, onOK, onFail,threadid).start();
                        });
                });
                //use xui.request function
                xui('xui_request').onClick(function(){
                    var hash=getRequest();
                    if(hash)
                        xui.Thread.observableRun(function(threadid){
                            xui.request(xuiService,hash, onOK, onFail,threadid);
                        });
                });
            });
        </script>

<!-- CrossUI Team License code: 201302-A347-DDA31C-61-->
<style>#xuibar a, #xuibar span{font-size:12px;margin-right:2px;padding:2px;}#xuibar a{text-decoration:underline;}#xuibar_more a{text-decoration:none;padding:3px;font-size:12px;text-decoration:none;display:block;}#xuibar a:hover, #xuibar_more a:hover{text-decoration:none;color:#fff!important;background:#598EDD;}#xuibar small{font-size:9px;}#xuibar_more{position:absolute;display:none;top:19px;z-index:6000;border:solid 1px;border-color:#E4F1FD #598EDD #598EDD #598EDD; background:#E4F1FD;}#xuibar_more{width:100px;}</style><script>var xuibar={byId:function(id){return document.getElementById(id).style},get1:function(){return this.byId('xuibar')},get2:function(id){return this.byId(id)},get3:function(){return this.byId('xuibar_l')},show:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}var s=n.get1();s.height='19px';s.backgroundColor='#E4F1FD';n.get3().display='block';},hide:function(){var n=this;if(n._t1){clearTimeout(n._t1);delete n._t1;}n._t1=setTimeout(function(){var s=n.get1();s.height='3px';s.backgroundColor='#598EDD';n.get3().display='none';if(n.showed)n.get2(n.showed).display='none';},600);},showPop:function(ele){var n=this,id=ele.id.replace(/.*:/,'');if(n.showed&&id!=n.showed)n.get2(n.showed).display='none';if(n._t1){clearTimeout(n._t1);delete n._t1;}if(n._t2){clearTimeout(n._t2);delete n._t2;}n.showed=id;if(ele.id.indexOf('pop:')==0){var s=n.get2(id);s.left=(ele.offsetLeft-4)+'px';s.display='block';}},hidePop:function(){var n=this;if(n._t2){clearTimeout(n._t2);delete n._t2;}n._t2=setTimeout(function(){n.get2('xuibar_more').display='none';},100);n.hide();}};</script><div id='xuibar' onmouseout="xuibar.hide()"  onmouseover="xuibar.show()" style='position:absolute;width:100%;left:0;top:0;height:3px;z-index:5000;background:#598EDD;line-height:19px;overflow:hidden;'><nobr><a target=_blank href='https://www.crossui.com'><strong>CrossUI Home</strong></a><a target=_blank href='https://www.crossui.com/RADGithub'>RAD Tools</a><a target=_blank href='https://www.crossui.com/xui/Examples'>Examples</a><a target=_blank href='https://www.crossui.com/FormBuilder'>Form Builder</a><a target=_blank href='https://www.crossui.com/FCEditor'>FusionCharts Editor</a><a target=_blank href='https://www.crossui.com/JSONEditor'>JSONEditor</a><a target=_blank href='https://www.crossui.com/xui/API/index.html'>API</a><!--a target=_blank href='https://www.crossui.com/Forum'>Forum</a--><a target=_blank href='https://www.crossui.com/order.html'><strong>Buy Now</strong></a></nobr></div><div id='xuibar_l' style="left:0;position:absolute;top:19px;display:none;border-top:1px solid #598EDD;font-size:0;line-height:0;width:100%;z-index:5500;"></div><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-59755ed8d0255613"></script>
<script>setTimeout(function(){(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-39926100-1', 'crossui.com');ga('send', 'pageview');},100);</script>

</body>
</html>